<template>
  <div class="page">
    <!--底部环形图片-->
    <div class="bottom-annulus"></div>
    <div>
      <ul id="quota" class="quota">
        <li v-for="(item, index) in quotaArr" :key="index"
            :class="[index === currentIndex ? 'main' : '',index === leftIndex ? 'six' : '',index === rightIndex ? 'three' : '']"
            @click.stop="switchRouter(index)">
          <p>{{ item.title }}</p>
          <div class="item-value">{{ item.value }}</div>
          <i class="rise"></i>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
  components: {

  },
  props: {

  },
  data () {
    return {

    }
  },
  computed: {

  },
  watch: {

  },
  created () {

  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
  .bottom-annulus{
    width: 1717px;
    height: 339px;
    position: absolute;
    top:200px;
    left:100px;
    background: url(../../assets/img/annulus.png) no-repeat;
    background-size: 100% 100%;
  }
</style>
